<script setup lang="ts">
import {
  User,
  Briefcase,
  ExternalLink,
  LucideChevronDown,
  ChevronRight,
  Home,
  Languages,
  Github,
  LucideLeaf,
  LucideBrain,
  LucideServer,
  LockKeyhole,
  Sun,
  Moon,
} from 'lucide-vue-next'
import { ElMessage } from 'element-plus'
import IconConstruction from '~icons/twemoji/construction'

// 深色模式状态
const isDarkMode = ref(false)

// 打开链接函数
function open(url: string, category: string) {
  // 此处示例：限制 AI 分类下的项目访问（可根据需求调整条件）
  if (category === 'ai') {
    noAccessPermission() // 触发权限提示
    return
  }
  window.open(url, '_blank') // 其他分类正常跳转
}

// 项目分类（添加了"全部"分类）
const categories = [
  { key: 'all', label: '全部项目' },
  { key: 'ai', label: 'AI平台' },
  { key: 'agriculture', label: '农业外来入侵物种' },
  { key: 'backend', label: '后端平台' },
]

// 当前选中的分类
const activeCategory = ref('all')

// 项目数据（添加了category字段以便筛选）
const projectsByCategory = {
  ai: [
    {
      id: 1,
      title: 'AI智能语音系统平台',
      description:
        '多功能AI语言平台，支持声音克隆、语音识别、语言合成等核心功能，同时提供口语测试和英文批改工具，满足多语言处理与自然语言理解需求，为用户提供智能化语言服务。',
      icon: LucideBrain,
      color: 'bg-blue-600',
      type: 'info',
      features: ['声音克隆', '语言合成', '语音识别', '口语测试', '英文批改'],
      url: '#',
      category: 'ai',
      state: 'completed', // 已完结
    },
    {
      id: 2,
      title: '智界魔方',
      description:
        '多功能AI交互平台，提供写作助手、语音聊天、AI阅读等智能工具，支持向量知识库、图像处理和多模态内容生成（文生图/视频），满足用户从文本到视觉的多样化需求。',
      icon: LucideBrain,
      color: 'bg-indigo-500',
      type: 'info',
      features: [
        '大模型对话',
        '语音聊天',
        '向量知识库',
        'AI阅读',
        '图像处理',
        '音频生成',
        '视觉生成(文/图 生 图/视频)',
        '3D设计',
        '语音处理',
      ],
      url: '#',
      category: 'ai',
      state: 'in_progress', // 进行中
    },
  ],
  agriculture: [
    {
      id: 3,
      title: '农业外来入侵物种防控与管理平台v1.0',
      description:
        '一款专注于农业外来入侵物种防控的综合管理平台，提供政策法规查询、入侵物种名录、分布地图和风险评估等功能，帮助农业专家和管理人员及时掌握行业动态，制定科学防控策略。',
      icon: LucideLeaf,
      color: 'bg-cyan-600',
      type: 'success',
      features: ['政策法规', '入侵物种名录', '分布地图', '风险评估', '行业动态'],
      url: 'http://119.23.78.227:7071/#/home',
      category: 'agriculture',
      state: 'completed', // 已完结
    },
    {
      id: 4,
      title: '农业外来入侵物种防控与管理平台v2.0',
      description:
        '在v1.0基础上全面升级的综合管理平台，优化了页面设计和用户体验，交互性更强、操作更流畅。平台延续并强化了政策法规查询、入侵物种名录、分布地图、风险评估和行业动态等核心功能，同时提升了数据可视化效果和响应速度。',
      icon: LucideLeaf,
      color: 'bg-blue-500',
      type: 'success',
      features: ['政策法规', '入侵物种名录', '分布地图', '风险评估', '行业动态'],
      url: 'http://119.23.78.227:7070/agriculture',
      category: 'agriculture',
      state: 'completed', // 已完结
    },
  ],
  backend: [
    {
      id: 5,
      title: 'Strapi后端数据管理平台',
      description:
        '基于Strapi构建的强大后端管理平台，专注于高效组织和管理多样化的内容与数据资源。平台提供灵活的接口管理、强大的权限控制以及全面的多媒体处理能力，帮助开发者快速搭建稳定的后端服务，满足各类应用的复杂需求。',
      icon: LucideServer,
      color: 'bg-blue-700',
      type: 'primary',
      features: ['内容管理', '接口管理', '多媒体处理', '权限控制'],
      url: 'http://119.23.78.227:1337/admin/',
      category: 'backend',
      state: 'completed', // 已完结
    },
  ],
}

// 状态样式映射
const getStateText = (state: any) => {
  return state === 'in_progress' ? '进行中' : '已完结'
}

// 状态样式映射
const getStateClass = (state: any) => {
  return state === 'in_progress'
    ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 border border-blue-200 dark:border-blue-700'
    : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 border border-green-200 dark:border-green-700'
}

// 计算属性：根据当前分类筛选项目
const getFilteredProjects = computed(() => {
  if (activeCategory.value === 'all') {
    // 返回所有项目
    return [
      ...projectsByCategory.ai,
      ...projectsByCategory.agriculture,
      ...projectsByCategory.backend,
    ]
  } else {
    // 返回指定分类的项目
    return projectsByCategory[activeCategory.value] || []
  }
})

// 获取分类标签
const getCategoryLabel = (categoryKey: string) => {
  const category = categories.find((c) => c.key === categoryKey)
  return category?.label || ''
}

// 语言切换下拉菜单
const languageBtn = document.getElementById('languageBtn')
const languageDropdown = document.getElementById('languageDropdown')

if (languageBtn && languageDropdown) {
  languageBtn.addEventListener('click', (e) => {
    e.stopPropagation()
    languageDropdown.classList.toggle('hidden')
  })

  document.addEventListener('click', () => {
    languageDropdown.classList.add('hidden')
  })
}

const featurePending = () => {
  ElMessage({
    message: '前方施工中,敬请期待',
    type: 'warning',
    icon: IconConstruction,
  })
}

const noAccessPermission = () => {
  ElMessage({
    message: '暂无访问权限，请联系管理员申请权限',
    type: 'warning',
    icon: LockKeyhole,
  })
}

// 新窗口跳转链接
function openBeianLink() {
  window.open('https://beian.miit.gov.cn/', '_blank')
}

// 在 DOM 上应用 dark class
watchEffect(() => {
  const html = document.documentElement
  if (isDarkMode.value) {
    html.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  } else {
    html.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  }
})

// 初始化读取本地存储的主题设置
onMounted(() => {
  const savedTheme = localStorage.getItem('theme')
  isDarkMode.value = savedTheme === 'dark'
})
</script>

<template>
  <div
    class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-blue-950 text-gray-800 dark:text-gray-200 transition-colors duration-300"
  >
    <!-- 工具栏 -->
    <div
      class="bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm border-b border-blue-100 dark:border-blue-900/50 sticky top-0 z-50 shadow-sm"
    >
      <div class="container mx-auto py-3 flex items-center justify-between">
        <!-- 左侧 Logo -->
        <div class="flex items-center space-x-2">
          <User class="h-6 w-6 text-blue-600 dark:text-blue-400" />
          <span class="text-xl font-bold">ASL</span>
        </div>

        <!-- 工具栏选项 -->
        <div class="flex items-center space-x-4">
          <!-- 导航栏-->
          <nav class="hidden md:flex justify-center space-x-8">
            <a
              href="#home"
              class="flex items-center space-x-1 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors py-2"
            >
              <Home class="h-4 w-4" />
              <span>首页</span>
            </a>
            <a
              href="#about"
              class="flex items-center space-x-1 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors py-2"
            >
              <User class="h-4 w-4" />
              <span>关于我</span>
            </a>
            <a
              href="#projects"
              class="flex items-center space-x-1 text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors py-2"
            >
              <Briefcase class="h-4 w-4" />
              <span>项目</span>
            </a>
          </nav>
          <!-- 分隔 -->
          <el-divider direction="vertical" />
          <button
            @click="isDarkMode = !isDarkMode"
            class="flex items-center justify-center w-10 h-10 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            <component
              :is="isDarkMode ? Sun : Moon"
              class="h-5 w-5 text-gray-700 dark:text-gray-300"
            />
          </button>
          <el-divider direction="vertical" />
          <div class="relative" @click="featurePending">
            <button
              id="languageBtn"
              class="flex items-center space-x-1 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
            >
              <Languages class="h-4 w-4" />
              <LucideChevronDown class="w-5 h-5 text-gray-500" />
            </button>
          </div>
          <!-- 分隔 -->
          <el-divider direction="vertical" />
          <Github
            class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors cursor-pointer"
            @click="featurePending"
          />
        </div>
      </div>
    </div>

    <main>
      <!-- 首页英雄区 -->
      <section
        id="home"
        class="py-20 md:py-32 bg-gradient-to-br from-blue-50 to-white dark:from-gray-800 dark:to-gray-900"
      >
        <div class="container mx-auto px-4">
          <div class="flex flex-col md:flex-row items-center justify-between">
            <div class="md:w-1/2 mb-10 md:mb-0">
              <div>
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-2 leading-tight">
                  <span class="text-blue-600 dark:text-blue-400">ASL个人简介</span>
                  <br class="md:hidden" />
                  <!-- 移动端换行 -->
                  <span class="block text-lg md:text-xl text-gray-600 dark:text-gray-400">
                    个人项目集
                  </span>
                </h1>
                <p class="max-w-xl text-gray-700 dark:text-gray-300 mb-8">
                  专注于前端开发与创意项目，展示技术实践与设计思考。
                </p>
              </div>
              <div class="flex flex-wrap gap-4">
                <a
                  href="#projects"
                  class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 flex items-center gap-2 transform hover:-translate-y-1"
                >
                  <span>查看项目</span>
                  <ChevronRight class="h-4 w-4" />
                </a>
                <a
                  href="#about"
                  class="px-6 py-3 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 hover:border-blue-600 dark:hover:border-blue-400 text-gray-800 dark:text-gray-200 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
                >
                  了解更多
                </a>
              </div>
            </div>

            <div class="md:w-1/2 flex justify-center">
              <div
                class="relative w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full flex items-center justify-center shadow-2xl animate-float"
              >
                <div
                  class="absolute inset-2 bg-white dark:bg-gray-900 rounded-full flex items-center justify-center"
                >
                  <User class="h-24 w-24 text-blue-600 dark:text-blue-400" />
                </div>
                <!-- 装饰元素 -->
                <div
                  class="absolute -top-4 -right-4 w-16 h-16 bg-green-400/20 rounded-full backdrop-blur-sm border border-white/20"
                ></div>
                <div
                  class="absolute -bottom-6 -left-6 w-20 h-20 bg-purple-400/20 rounded-full backdrop-blur-sm border border-white/20"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 关于我 -->
      <section id="about" class="py-20 bg-white dark:bg-gray-900">
        <div class="container mx-auto px-4 md:px-8 lg:px-16">
          <!-- 标题区 -->
          <div class="text-center mb-8">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">
              关于 <span class="text-blue-600 dark:text-blue-400">ASL</span>
            </h2>
            <div class="w-20 h-1 bg-blue-600 dark:bg-blue-400 mx-auto rounded-full mt-2"></div>
          </div>

          <!-- 简介与项目区 -->
          <div
            class="max-w-6xl mx-auto text-lg text-gray-700 dark:text-gray-300 leading-relaxed space-y-8"
          >
            <p class="text-center">
              专注于全栈开发与农业科技智能化的技术从业者，擅长将 Vue3 技术栈与 AI
              算法整合到垂直行业场景中，主导开发多套农业数字化管理系统。
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
              <!-- 农业外来入侵物种防控平台前端开发 -->
              <div
                class="bg-yellow-50 dark:bg-yellow-900/20 p-6 rounded-xl border border-yellow-100 dark:border-yellow-800/30 hover:shadow-md transition-shadow"
              >
                <div
                  class="w-14 h-14 bg-yellow-100 dark:bg-yellow-800/30 rounded-full flex items-center justify-center mb-4"
                >
                  <LucideLeaf class="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
                </div>
                <h3 class="text-xl font-bold mb-2">农业外来入侵物种防控平台</h3>
                <p class="text-gray-600 dark:text-gray-400">
                  <el-tag type="success" effect="plain">前端开发</el-tag><br />
                  核心功能：数据采集界面、地图可视化、实时新闻报道
                </p>
                <span class="text-sm text-blue-600 dark:text-blue-400 font-medium">
                  技术栈：<span class="text-gray-500 dark:text-gray-400">
                    Vue3 + TypeScript + Tailwind CSS + Pinia + Element UI
                  </span>
                </span>
              </div>

              <!-- AI人工智能平台前端开发 -->
              <div
                class="bg-green-50 dark:bg-green-900/20 p-6 rounded-xl border border-green-100 dark:border-green-800/30 hover:shadow-md transition-shadow"
              >
                <div
                  class="w-14 h-14 bg-green-100 dark:bg-green-800/30 rounded-full flex items-center justify-center mb-4"
                >
                  <LucideBrain class="h-6 w-6 text-green-600 dark:text-green-400" />
                </div>
                <h3 class="text-xl font-bold mb-2">AI人工智能平台</h3>
                <p class="text-gray-600 dark:text-gray-400">
                  <el-tag type="info" effect="plain">前端开发</el-tag><br />
                  核心功能：智能体、知识库、AI对话、模型训练、视觉生成
                </p>
                <span class="text-sm text-green-400 font-medium">
                  技术栈：<span class="text-gray-500 dark:text-gray-400">
                    Vue3 + TypeScript + Tailwind CSS + Pinia + WhyUI
                  </span>
                </span>
              </div>

              <!-- Strapi后端数据管理平台开发 -->
              <div
                class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-xl border border-blue-100 dark:border-blue-800/30 hover:shadow-md transition-shadow"
              >
                <div
                  class="w-14 h-14 bg-blue-100 dark:bg-blue-800/30 rounded-full flex items-center justify-center mb-4"
                >
                  <LucideServer class="h-6 w-6 text-blue-600 dark:text-blue-400" />
                </div>
                <h3 class="text-xl font-bold mb-2">Strapi后端数据管理平台</h3>
                <p class="text-gray-600 dark:text-gray-400">
                  <el-tag type="primary" effect="plain">后端开发</el-tag><br />
                  核心功能：多角色权限管理、数据接口开发、系统监控仪表盘
                </p>
                <span class="text-sm text-blue-400 font-medium">
                  技术栈：<span class="text-gray-500 dark:text-gray-400">
                    Strapi + Node.js + MySQL + Docker
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 项目展示 -->
      <section
        id="projects"
        class="py-20 bg-gradient-to-b from-blue-50 to-white dark:from-gray-800 dark:to-gray-900"
      >
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">我的项目</h2>
            <div class="w-20 h-1 bg-blue-600 dark:bg-blue-400 mx-auto rounded-full"></div>
            <p class="mt-4 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              探索我开发的各种项目，从农业科技到人工智能应用
            </p>
          </div>

          <!-- 项目分类标签 -->
          <div class="flex flex-wrap justify-center gap-4 mb-12">
            <button
              v-for="category in categories"
              :key="category.key"
              :class="[
                'px-6 py-2.5 rounded-full text-lg font-medium cursor-pointer transition-all duration-300',
                activeCategory === category.key
                  ? 'bg-blue-600 dark:bg-blue-500 text-white shadow-lg shadow-blue-500/20'
                  : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/30 border border-gray-200 dark:border-gray-700',
              ]"
              @click="activeCategory = category.key"
            >
              {{ category.label }}
            </button>
          </div>

          <!-- 项目卡片 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div
              v-for="project in getFilteredProjects"
              :key="project.id"
              class="bg-white dark:bg-gray-900 rounded-lg shadow-md transition-all duration-300 overflow-hidden group border border-gray-100 hover:-translate-y-2"
            >
              <div class="relative">
                <!-- 项目状态标签 -->
                <div
                  class="absolute top-2 right-2 rounded-full px-3 py-1 text-xs font-medium z-10"
                  :class="getStateClass(project.state)"
                >
                  {{ getStateText(project.state) }}
                </div>

                <!-- 项目图标 -->
                <div class="absolute top-2 left-2 rounded-lg z-10 p-1" :class="project.color">
                  <component :is="project.icon" class="h-10 w-10 text-white" />
                </div>

                <!-- 项目封面 -->
                <div class="h-48 bg-gray-100 dark:bg-gray-800 overflow-hidden">
                  <img
                    :src="'https://picsum.photos/800/600?random=' + project.id"
                    alt="项目图片"
                    class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                </div>
              </div>

              <div class="p-6 pt-12">
                <h3
                  class="text-xl font-bold mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors"
                >
                  {{ project.title }}
                </h3>

                <p class="text-gray-600 dark:text-gray-400 mb-6 line-clamp-4">
                  {{ project.description }}
                </p>

                <div class="flex flex-wrap gap-2 mb-6">
                  <el-tag
                    v-for="(feature, index) in project.features"
                    :key="index"
                    :type="project.type"
                    class="text-xs"
                    effect="dark"
                  >
                    {{ feature }}
                  </el-tag>
                </div>

                <div class="flex justify-between items-center">
                  <span class="text-sm text-gray-500 dark:text-gray-400">
                    <i class="fa-solid fa-folder-open mr-1"></i>
                    {{ getCategoryLabel(project.category) }}
                  </span>
                  <button
                    @click="open(project.url, project.category)"
                    class="flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors"
                  >
                    <span class="mr-1">查看详情</span>
                    <ExternalLink class="h-4 w-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-400 py-12">
      <div
        class="max-w-[1400px] mx-auto flex flex-wrap justify-center items-center gap-8 md:gap-12 text-sm text-slate-500"
      >
        <p class="font-medium">© 2025 smart-cube.xyz 版权所有</p>
        <div
          class="flex items-center gap-2 cursor-pointer hover:text-blue-600 transition-colors duration-300"
          @click="openBeianLink"
        >
          <IconRecord :size="18" />
          <span class="hover:underline">粤ICP备2025426714号</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 全局样式 */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

/* 自定义动画 */
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}
</style>
